<template>
    <div>
        <h1>v-model 双向数据绑定</h1>
        <div>
            <span>用户名：</span>
            <input type="text" v-model="username"> &nbsp; {{ username }}
            <br>
            <span>密码：</span>
            <input type="password" v-model="pwd"> &nbsp; {{ pwd }}
        </div>
        <div>
            <span>家的地址：</span> {{ address }}
            <select v-model="address">
                <option value="河南">河南</option>
                <option value="周口">周口</option>
                <option value="沈丘">沈丘</option>
                <option value="信阳">信阳</option>
                <option value="焦作">焦作</option>
            </select>

        </div>
        <div>
            <!--
                v-model在复选框中只关注 value的值 不关注其怎么操作
                checkbox  非数组内容
                value  属性的值 是数组类型
            -->
            <span>爱好：</span> {{ bobby }}
            <input type="checkbox" v-model="bobby" value="美杜莎">美杜莎
            <input type="checkbox" v-model="bobby" value="萧薰儿">萧薰儿
            <input type="checkbox" v-model="bobby" value="小医仙">小医仙
            <input type="checkbox" v-model="bobby" value="药老">药老
        </div>
        <div>
            <span>性别：</span> {{ sex }}
            <input type="radio" value="男" name="sex" v-model="sex"> 男
            <input type="radio" value="女" name="sex" v-model="sex"> 女
        </div>
        <div>
            <span>个人名言：</span> 
            <textarea v-model.lazy="intro">
            </textarea>
            {{ intro }}
        </div>
        <div>
            <span>自我介绍：</span> {{ modz }}
            <input type="text" v-model.trim="modz">
        </div>
        <div>
            <span>年龄是：</span>
            <input type="text" v-model.number="age">
        </div>
    </div>

    <hr>

    <h1>字符串翻转</h1>
    <h2>{{ msg }}</h2>
    <button @click="btn">点击翻转字符</button>
</template>
<script>
export default {
    data() {
        return {
            /**
             * 文本插值：{{}}
             * v-html：将数据原封不动的输出到页面中 解决包含html标签的
             * v-bind：对所有包含属性的标签 进行的数据绑定 动态输出 :
             * v-once: 在页面第一次渲染之后 就不能进行二次修改
             * v-on：对所有事件进行绑定 动态输出 简写 @
             */
            msg: "Hello 王林 外号王麻子 12345",
            username: '白小纯',
            pwd: '123456',
            address: '',
            bobby: [],
            sex: '',
            intro: '',
            age: 18,
            modz:''

        };
    },
    methods: {
        btn() { 
            console.log("点击了按钮");
            console.log(this.msg.split("").reverse().join(""));
            this.msg = this.msg.split("").reverse().join("")
        }
    }   

}

</script>